<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :title="title==='add'?'新建标签':'编辑标签'"
      width="600px"
      @close="close"
    >
      <div v-loading="dialogLoading">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="120px"
          size="small"
        >
          <el-form-item prop="groupId" label="标签组">
            <el-select v-model="form.groupId" placeholder="请选择">
              <el-option
                v-for="item in labelGroupSelect"
                :key="item.id"
                :label="item.groupName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="tagName" label="标签名称">
            <el-input v-model.trim="form.tagName" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item prop="visible" label="面向会员开放">
            <el-switch v-model="form.visible" />
            <span class="labelTip">打开即会员在小程序信息可见，可作为一些特殊的身份特征，默认关闭请谨慎开启</span>
          </el-form-item>
          <el-form-item prop="remark" label="备注">
            <el-input
              v-model="form.remark"
              :autosize="{ minRows: 3, maxRows: 5}"
              type="textarea"
              placeholder="请输入..."
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="title!=='add'" size="medium" round style="float: left; color: #fa5151" @click="del">删除标签</el-button>
        <el-button size="medium" round @click="hide">取 消</el-button>
        <el-button size="medium" round type="primary" @click="add">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addNewTag, delTag, editTag, getTagsGroup } from '../../../../api/vip'
export default {
  data() {
    return {
      /**
       * 表单校验字段相关
       */
      // 表单规则
      rules: {
        groupId: [
          {
            required: true,
            message: '请选择标签组',
            trigger: ['change']
          }
        ],
        tagName: [
          {
            required: true,
            message: '请输入标签名',
            trigger: ['blur', 'change']
          }
        ]
      },
      // 配置
      resolve: null,
      reject: null,
      // 状态
      dialogVisible: false,
      dialogLoading: false,
      title: 'add', // 弹窗标题
      // 数据
      labelGroupSelect: [], // 标签组名下拉框内容
      tagName: '',
      tagId: '',
      form: {
        id: null,
        groupId: null,
        tagName: null,
        visible: false
      }
    }
  },
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    /**
     * 数据组
     */
    // 获取标签组列表
    getTagsGroupList() {
      getTagsGroup().then((res) => {
        this.labelGroupSelect = res.data
      })
    },
    /**
     * 按钮组
     */
    del() {
      this.$prompt(`检查到你正在删除标签<span style="color: #fa5151">${this.tagName}</span>，删除标签后该标签标记将自动从所有已标记会员的标签列表中消失。`, '提示', {
        confirmButtonText: '确定删除',
        showCancelButton: false,
        type: 'warning',
        dangerouslyUseHTMLString: true,
        inputPlaceholder: '请输入标签名称确认',
        inputValidator: (val) => {
          if (val !== this.tagName) {
            return '标签名不相符'
          }
        }
      }).then(() => {
        this.delSubmit()
      }).catch(() => {})
    },
    add() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.visible === true) {
            this.$prompt(`检查到你选择开放标签<span style="color: #4D82F3">${this.form.tagName}</span>，开放标签后该标签标记的会员将可在会员资料信息中看到此标签，为了避免引起顾客沟通问题`, '提示', {
              confirmButtonText: '确定开放并保存',
              showCancelButton: false,
              type: 'warning',
              dangerouslyUseHTMLString: true,
              inputPlaceholder: '请输入标签名称确认',
              inputValidator: (val) => {
                if (val !== this.form.tagName) {
                  return '标签名不相符'
                }
              }
            }).then(() => {
              this.submitForm()
            }).catch(() => {})
          } else {
            this.submitForm()
          }
        }
      })
    },

    /**
     * 状态组
     */
    open(detail = {}, type = 'add') {
      this.title = type
      if (type === 'add') {
        this.form.groupId = detail.groupId || null
      } else {
        this.form = JSON.parse(JSON.stringify(detail))
        this.tagName = this.form.tagName
        this.tagId = this.form.id
      }
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.getTagsGroupList()
      this.dialogVisible = true
    },

    hide() {
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
    },

    close() {
      this.dialogLoading = false
      this.$refs.form.resetFields()
      this.form = {
        businessId: null,
        id: null,
        groupId: null,
        tagName: null,
        visible: false
      }
    },
    /**
     * 方法组
     */

    // 删除标签
    delSubmit() {
      this.dialogLoading = true
      delTag(this.tagId).then(() => {
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000,
          offset: 40
        })
        this.resolve('del')
        this.hide()
      }).finally(() => {
        this.dialogLoading = false
      })
    },

    // 添加和修改提交表单
    submitForm() {
      this.dialogLoading = true
      const params = Object.assign({}, this.form)
      // 删除多余字段
      for (const key in params) {
        if (params[key] === null) {
          delete params[key]
        }
      }
      if (this.title === 'add') {
        addNewTag(params).then(() => {
          this.$notify({
            title: '成功',
            message: '新增成功',
            type: 'success',
            duration: 2000,
            offset: 40
          })
          this.resolve('add')
          this.hide()
        }).finally(() => {
          this.dialogLoading = false
        })
      } else if (this.title === 'update') {
        editTag(params).then(() => {
          this.$notify({
            title: '成功',
            message: '修改成功',
            type: 'success',
            duration: 2000,
            offset: 40
          })
          this.resolve('update')
          this.hide()
        }).finally(() => {
          this.dialogLoading = false
        })
      }
    }
  }
}
</script>

<style scoped>
</style>
